<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法的装饰</title>
</head>
<body>
    <h1>方法的装饰</h1>

    <script>
        // 方法装饰器
        function readonly(target, name, descriptor) {
            descriptor.writable = false;
            return descriptor;
        }

        // 使用装饰器
        class Person {
            @readonly
            name() { return `${this.first} ${this.last}` }
        }

        // 带参数的方法装饰器
        function log(level) {
            return function(target, name, descriptor) {
                const original = descriptor.value;
                
                descriptor.value = function(...args) {
                    console.log(`[${level}] 调用: ${name}`);
                    return original.apply(this, args);
                };
                
                return descriptor;
            };
        }

        // 实际应用示例
        // 1. 性能监控装饰器
        function measure(target, name, descriptor) {
            const original = descriptor.value;
            
            descriptor.value = async function(...args) {
                const start = performance.now();
                const result = await original.apply(this, args);
                const end = performance.now();
                
                console.log(`${name} 执行时间: ${end - start}ms`);
                return result;
            };
            
            return descriptor;
        }

        class API {
            @measure
            async fetchData() {
                // 模拟API请求
                await new Promise(resolve => setTimeout(resolve, 1000));
                return { data: 'some data' };
            }
        }

        // 2. 缓存装饰器
        function memoize(target, name, descriptor) {
            const original = descriptor.value;
            const cache = new Map();
            
            descriptor.value = function(...args) {
                const key = JSON.stringify(args);
                if (cache.has(key)) {
                    return cache.get(key);
                }
                
                const result = original.apply(this, args);
                cache.set(key, result);
                return result;
            };
            
            return descriptor;
        }

        class Calculator {
            @memoize
            fibonacci(n) {
                if (n <= 1) return n;
                return this.fibonacci(n - 1) + this.fibonacci(n - 2);
            }
        }

        // 3. 权限检查装饰器
        function requireAuth(role) {
            return function(target, name, descriptor) {
                const original = descriptor.value;
                
                descriptor.value = function(...args) {
                    if (!this.currentUser || this.currentUser.role !== role) {
                        throw new Error('权限不足');
                    }
                    return original.apply(this, args);
                };
                
                return descriptor;
            };
        }

        class AdminPanel {
            constructor(user) {
                this.currentUser = user;
            }

            @requireAuth('admin')
            deleteUser(userId) {
                console.log(`删除用户: ${userId}`);
            }
        }
    </script>
</body>
</html> 